<template>
    <div class="boxContentCss">
        <div >
            <EdCreateCard title="基本信息">
            <div class="borderTop006 descriptionsClass">
                <div class="marginLeft32Right32">
                    <el-form :model="form" ref="formRef" label-width="100px" class="el-form-item-error-box" label-position="right">
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-form-item label="店铺名称" class="margin0"  prop="title">
                                    <el-input size="small" style="width:100%"  v-model="form.merchantName" maxlength="15" disabled></el-input>
                                </el-form-item>

                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="店铺地址" class="margin0" prop="title" >
                                    <el-input  size="small" style="width:100%" v-model="form.address" maxlength="15" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所在行业" class="margin0"  prop="title">
                                    <EdCascader v-model="form.industryId" :cascaderParams="selectIndustryParams" ref="cascader" style="width:100%" @change-emit-label="IndustryValueChange" disabled></EdCascader>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-form-item label="联系方式" class="margin0"  prop="tel" :rules="$validate.validates({required:true,msg:'联系方式不能为空',type:'mobile'})">
                                    <el-input  size="small" style="width:100%" v-model="form.tel" placeholder="请输入联系方式" maxlength="15"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="营业时间" class="margin0"  prop="time" :rules="$validate.validates({required:true,msg:'营业时间不能为空'})">
                                    <el-time-picker
                                            is-range
                                            v-model="form.time"
                                            size="small"
                                            format="HH:mm"
                                            value-format="HH:mm"
                                            style="width:100%"
                                            start-placeholder="开始时间"
                                            end-placeholder="结束时间"
                                            placeholder="选择时间范围">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            </EdCreateCard>
            <EdCreateCard title="店铺详情">
                <div class="borderTop006 descriptionsClass">
                    <div class="marginLeft32Right32">
                        <div class="fontSize14 line-height1-5 color065">
                            <el-input style="width: 92%;" size="small" v-model="formTwo.description" type="textarea" :resize="'none'" placeholder="店铺详情" maxlength="128" :rows="5"></el-input>
                        </div>
                        <!-- <el-input v-else size="small" v-model="formTwo.description" type="textarea" :resize="'none'" placeholder="请输入店铺详情" maxlength="128" :rows="5"></el-input> -->
                    </div>
                    <div style="margin: 40px 32px 40px 32px;overflow: hidden">
                        <div class="floatLeft ">
                            <p class="title">营业执照</p>
                            <div class="business-logo">
                                <el-upload
                                    class="business-uploader-logo"
                                    :action="action"
                                    :headers="headers"
                                    accept="image/*"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessLicense"
                                    :before-upload="beforeAvatarUpload">
                                <el-image v-if="formTwo.licensePic" style="width: 365px;height: 192px;" :src="formTwo.licensePic" fit="contain"></el-image>
                                <div v-else>
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                    <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 10px 0 12px 0;line-height: 1">上传图片</div>
                                    <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65);line-height: 1">大小不超过2M</div>
                                </div>
                                </el-upload>
                            </div>
                        </div>
                        <div class="floatLeft marginBottom24">
                            <p class="title">店铺LOGO</p>
                            <el-upload
                                    class="business-uploader-logo"
                                    :action="action"
                                    :headers="headers"
                                    accept="image/*"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccessStore"
                                    :before-upload="beforeAvatarUpload">
                                <el-image v-if="formTwo.logo" style="width: 365px;height: 192px;" :src="formTwo.logo" fit="contain"></el-image>
                                <div v-else>
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                    <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 10px 0 12px 0;line-height: 1">上传图片</div>
                                    <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65);line-height: 1">大小不超过2M</div>
                                </div>
                            </el-upload>
                        </div>
                    </div>
                    <div style="margin-left: 20px;">
                        <el-button class="ed-button ed_black-bottom" @click="saveParkList()" >确定</el-button>
                        <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                    </div>
                </div>
            </EdCreateCard>
        </div>
        <EdCreateCard title="店员管理">
            <template #back>
                <div class="createBack">
                    <el-button class="ed-button ed_black-bottom ed-button36" @click="saveBasics" v-has="'shopping:store:add'"><svg-icon icon-class="add-svg"/>添加店员</el-button>
                </div>
            </template>
            <ApiTable :api="load" ref="table" :params="queryForm" style="padding: 20px;">
                <el-table-column :show-overflow-tooltip="true" prop="clerkName" label="店员姓名"/>
                <el-table-column :show-overflow-tooltip="true" prop="clerkMobile" label="店员手机号"/>
                <el-table-column :show-overflow-tooltip="true"  label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border"  @click="updateRow(scope.row)" v-has="'shopping:store:update'" >编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" @click="del(scope.row)" v-has="'shopping:store:delete'">删除</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
            <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
            <EdDialog ref="dialogRef" v-if="addClerkShow" :title="isUpdate ? '编辑店员' : '新增店员'" @close-dialog="closeDialog" @save-dialog="saveDialog">
                <el-form :model="addClerkForm"  ref="ruleForm" label-position='right' label-width="auto">
                    <el-form-item label="店员姓名" prop="clerkName"  :rules="$validate.validates({required:true,msg:'请输入店员姓名'})">
                        <el-input v-model="addClerkForm.clerkName" maxlength="30"></el-input>
                    </el-form-item>
                    <el-form-item label="店员手机号" prop="clerkMobile" :rules="$validate.validates({required:true,msg:'请输入店员手机号',type:'mobile'})" >
                        <el-input v-model="addClerkForm.clerkMobile"></el-input>
                    </el-form-item>
                </el-form>
            </EdDialog>
        </EdCreateCard>
    </div>
</template>

<script>
    import {merchantSelf ,updatekmerchantList,checkClerkList,deleteClerk,addClerkList,ClerkShow,editClerkList} from "./api";
    import {getIndustry} from "../../shopping/business/api";
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import {getToken} from 'src/utils/auth'
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import ApiTable from 'src/components/ApiTable.vue'
    import EdDialog from 'src/components/EdDialog.vue'
    import EdCascader from 'src/components/EdCascader.vue'
    export default {
        name: "BusinessList",
        components: { EdCreateCard,EdCascader,ApiTable,EdDialog,EdConfirmDelete},
        data(){
            return{
                isEditting: false,
                form:{
                    merchantName:'',
                    industryId:'',
                    industryName:'',
                    address:'',
                    tel:"",
                    shopHourEnd:"",
                    shopHourStart:"",
                    time: "",
                    id:"",
                    description:'',
                    licensePic:'',
                    logo:''
                },
                queryForm:{
                    merchantName:'',
                    clerkMobile:''
                },
                selectIndustryParams:{
                    placeholder:"请选择",
                    options: [],
                    props: {value: 'id', label: 'name', checkStrictly: false,emitPath:false}
                },
                basicsIndex:1,
                detailsIndex:1,
                formTwo:{
                    description:"",
                    licensePic:"",
                    logo:""
                },
                file:new FormData(),
                action:"",
                headers:{
                    RdAuthorization: getToken()
                },
                showShop:false,
                addClerkShow:false,
                // 店员添加传的参数
                addClerkForm:{
                    clerkMobile: "",
                    clerkName: "",
                    clerkType: 1,
                    merchantId: '',
                    merchantName:'',
                    // id:'',
                    // userId:''
                },
                // 删除参数
                deletForm:{
                    id:''
                },
                isUpdate:false,
                // 编辑保存时传的id
                id:''
            }
        },
        activated(){
            this.action = this.$baseApi + "/file/upload";
            this.init()
           
        },
        deactivated() {
            this.form = {
                merchantName:'',
                industryId:'',
                industryName:'',
                address:'',
                tel:"",
                shopHourEnd:"",
                shopHourStart:"",
                time: "",
                id:""
            }
            this.addClerkForm = {
                clerkMobile: "",
                clerkName: "",
                clerkType: 1,
                merchantId: '',
                merchantName:'',
                // id:'',
                // userId:''
            }
            this.formTwo = {
                description:"",
                licensePic:"",
                logo:""
            }
            this.$refs['formRef'].resetFields();
        },
        methods:{
            load:checkClerkList,
            init(){
                 getIndustry().then((res) =>{
                    this.$set(this.selectIndustryParams,'options', res.data)
                    // 编辑回显的接口
                        merchantSelf().then(response => {
                            if(response.success) {
                                this.form = {
                                    id:response.data.id,
                                    merchantName:response.data.merchantName,
                                    merchantId:response.data.id,
                                    address:response.data.address,
                                    industryId:parseInt(response.data.industryId),
                                    industryName:response.data.industryName,
                                    shopHourStart:response.data.shopHourStart,
                                    shopHourEnd:response.data.shopHourEnd,
                                    tel:response.data.tel ? response.data.tel : "",
                                    time:response.data.shopHourStart ? [response.data.shopHourStart,response.data.shopHourEnd] : ""
                                };
                                this.formTwo = {
                                    id:response.data.id,
                                    description:response.data.description,
                                    licensePic:response.data.licensePic,
                                    logo:response.data.logo
                                };
                                this.addClerkForm.merchantId= response.data.id
                                this.addClerkForm.merchantName= response.data.merchantName
                                this.$refs.table.load()
                            }
                        })
                    // }
                })
            },
            saveParkList(index){
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            this.form.shopHourStart = this.form.time[0];
                            this.form.shopHourEnd = this.form.time[1];
                            this.form.tel = this.form.tel;
                            this.form.description = this.formTwo.description;
                            this.form.licensePic = this.formTwo.licensePic;
                            this.form.logo = this.formTwo.logo;
                            updatekmerchantList(this.form).then(response => {
                                if(response.code == 20000) {
                                    // this.basicsIndex = index;
                                    this.$message.success({
                                        message: '保存成功',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$router.push({path: '/shopping/store-list'})
                                    this.init()
                                }
                            })
                        }
                    })
            },
            handleAvatarSuccessLicense(file){
                this.formTwo.licensePic = file.data;
            },
            handleAvatarSuccessStore(file){
                this.formTwo.logo = file.data;
            },
            beforeAvatarUpload(file){
                console.log('file',file);
                // const fileType = file.name.split('.');
                // const fileDate = fileType.slice(-1);
                // if (['jpeg', 'jpg', 'png', 'gif'].indexOf(file.type.split('/')[1]) < 0) {
                //     this.$message.error({message: '仅支持格式：jpeg、jpg、png、gif!', center: true});
                //     return false
                // }
                // if (['jpeg', 'jpg', 'png'].indexOf(fileDate[0]) < 0) {
                //     this.$message.error('仅支持格式：.jpeg、.jpg、.png!');
                //     return false
                // }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 2MB!');
                }
                return isLt2M;
            },
            IndustryValueChange(row){
                console.log('row',row);
                this.form.industryName = row
            },
            saveBasics(row){
                this.isUpdate=false
                console.log(this.$refs.table);
                if(this.$refs.table.page.data && this.$refs.table.page.data.length > 4) {
                    this.$message.warning('店员最多只能新增5条');
                    return
                }
                this.addClerkShow = true
                this.addClerkForm.clerkType =1
                this.addClerkForm.clerkName = row.clerkName
                this.addClerkForm.clerkMobile = row.clerkMobile
            },
            closeDialog(){
                // 用dialog的组件一定要这么写，要不然下次点击的时候不弹框
                this.addClerkShow = false
                this.$refs.ruleForm.resetFields()
            },
            saveDialog(){
                    this.addClerkForm.merchantName  = this.form.merchantName
                    this.addClerkForm.merchantId  = this.form.id
                    this.$refs.ruleForm.validate((valid)=>{
                        if(!valid){
                            this.$refs.dialogRef.loading  = false
                            return
                        }
                        // 编辑跟新的接口
                        if(this.isUpdate){
                            this.addClerkForm.id = this.id
                            this.addClerkForm.clerkType = 1
                            editClerkList(this.addClerkForm).then(response => {
                                if(response.success) {
                                    this.$message.success({
                                        message: '编辑店员成功！',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$refs.table.load()
                                    // this.checkClerkList()
                                    this.addClerkShow = false
                                }
                            }).catch(() => {
                                this.$refs.dialogRef.loading  = false
                            })
                        } else {
                            // 新增店员的接口
                            this.addClerkForm.id = null
                            addClerkList(this.addClerkForm).then(response => {
                                if(response.success) {
                                    this.$message.success({
                                        message: '新增店员成功！',
                                        duration: 2000,
                                        center:true
                                    });
                                    this.$refs.table.load()
                                    this.addClerkShow = false
                                    this.$refs.dialogRef.loading  = false
                                }
                            }).catch(() => {
                                this.$refs.dialogRef.loading  = false
                            })
                        }
                })
            },
            del(row) {
                this.deletForm.id = row.id;
                this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            confirmDeleteTrue(){
                deleteClerk({id:this.deletForm.id}).then(response => {
                    if(response.code == 20000) {
                    this.$message.success({
                        message: '店员删除成功！',
                        duration: 2000,
                        center:true
                    });
                    this.$refs.table.load()
                    }
                })
            },
            // 店员编辑回显的接口
            updateRow(row){
                this.addClerkShow = true
                this.isUpdate=true
                if(this.isUpdate){
                    ClerkShow({id:row.id}).then(response => {
                        if(response.success) {
                            this.addClerkForm.clerkMobile = response.data.clerkMobile,
                            this.addClerkForm.clerkName = response.data.clerkName.split('-')[response.data.clerkName.split('-').length-1],
                            this.id = response.data.id
                        }
                    })
                }else {

                }
            },
        }
    }
</script>

<style lang="scss">
    .descriptionsClass{
        padding: 20px 0 0 0;
        .el-descriptions__body{
            td{
                padding: 5px 0 !important;
                .el-descriptions-item__label{
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.85);
                    white-space: nowrap;
                }
                .el-descriptions-item__content{
                    font-size: 14px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.65);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .business-uploader-logo{
        margin-top: 24px;
        .el-upload{
            width: 365px;
            height: 192px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px dashed rgba(0, 0, 0, 0.14901960784313725);
            border-radius: 2px;
            overflow: hidden;
            .el-icon-plus{
                font-size: 28px;
                color: rgba(0, 0, 0, 0.45);
                margin-top: 57px;
            }
        }
    }
    .business-logo{
        width: 365px;
        height: 192px;
        border-radius: 2px;
        margin-top: 24px;
        margin-right: 60px;
        img{
            width: 100%;
            height: 100%;
        }
    }

    .el-form-item-error-box{
        .el-form-item__error{
            left: 90px;
            margin-top: -5px;
        }
    }
</style>